import { View, Text, Input, Form, Button, Image ,Icon} from '@tarojs/components'
import './index.less'
import { registeraction } from '../../api/user'
import Taro from '@tarojs/taro'
import { connect } from 'react-redux'
import { login } from '../../actions/user'
import { useState,useEffect } from 'react'

function Register(props) {

  const [checked,setChecked] = useState(false)
  const [user_name,setUsername] = useState('')
  const [password,setPassword] = useState('')
  const [repassword,setRepassword] = useState('')
  const [nickname,setNickname] = useState('')
  const [user_email,setUser_email] = useState('')

  useEffect(()=>{
    if(checked&&user_name!=''&&password!=''&&repassword!=''&&nickname!=''&&user_email!=''){
      document.getElementById('register').style.backgroundColor = '#d02530'
    }
    else{
      document.getElementById('register').style.backgroundColor = '#c95555'
    }
  },[checked,user_name,password,repassword,nickname,user_email])

  const check = () => {
    setChecked(!checked)
  }

  const register = () => {
    const reg = /[0-9a-zA-Z_]+@[0-9a-zA-Z_]+\.[0-9a-zA-Z_]+/
    if(password!=repassword){
      Taro.showToast({title:'两次密码不相同',icon:'none'})
      return
    }
    else if(!user_email.match(reg)){
      Taro.showToast({title:'邮箱格式不正确',icon:'none'})
      return
    }
    else if(checked&&user_name!=''&&password!=''&&repassword!=''&&nickname!=''&&user_email!=''){
      registeraction(user_name,password,nickname,user_email)
      .then(res => {
        if (res.data.code == '200') {
          Taro.navigateTo({ url: '/pages/login/index' })
          Taro.showToast({title:'注册成功',icon:'none'})
        }
        else if (res.data.code == '400') {
          Taro.showToast({title:'用户名已存在',icon:'none'})
        }
      })
    }
    else if(!checked){
      Taro.showToast({title:'请先阅读协议',icon:'none'})
    }
    else{
      Taro.showToast({title:'请补全信息',icon:'none'})
    }
  }
  return (
    <View className='index'>
      <View className="index-cell">
        <View><Input placeholder="请输入用户名" value={user_name} onInput={e => setUsername(e.detail.value)} /></View>
        <View><Input password placeholder="请输入密码" value={password} onInput={e => setPassword(e.detail.value)}/></View>
        <View><Input password placeholder="请重复密码" value={repassword} onInput={e => setRepassword(e.detail.value)} /></View>
        <View><Input placeholder="请输入昵称" value={nickname} onInput={e => setNickname(e.detail.value)} /></View>
        <View><Input placeholder="请输入邮箱" value={user_email} onInput={e => setUser_email(e.detail.value)} /></View>
      </View>
      <View className='important'>
        <Icon size='16' type='success' color={checked?'#D02530':'#fff'} className='checkBox' onClick={check}/>
          我已阅读并同意 
          <Text>《用户服务协议》</Text>
          与
          <Text>《隐私条款》</Text>
      </View>
      <Button className='register' id='register' onClick={register}>注 册</Button>
    </View>
  )
}

const hoc = connect(({ login }) => ({
  data: login
}), (dispatch) => ({
  userlogin(data) {
    dispatch(login(data))
  }
}))

export default hoc(Register)
